// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT license.
@import "../common/common.scss";

$tool-icon-size: 32px;
$elements-margin: 4px;

.charticulator__toolbar-buttons-align-left {
  align-self: flex-start;
  justify-self: flex-start;
  display: flex;
  flex-direction: row;
  flex: 1;
}

.charticulator__toolbar-buttons-align-right {
  align-self: flex-end;
  justify-self: flex-end;
  display: flex;
  flex-direction: row;
}

.charticulator__toolbar-horizontal {
  @include font-main;

  $toolbar-height: $tool-icon-size;
  line-height: $toolbar-height;
  white-space: nowrap;

  flex: 1;
  display: flex;
  flex-direction: row;

  .el-text {
    margin: 0 0em;
  }

  &-group {
    display: flex;
    flex-direction: row;
  }

  &-group > * {
    height: $tool-icon-size;
    margin-right: $elements-margin;
  }

  &-label {
    margin: 0 10px;
    margin-left: 0px;
    font-size: 14px;
    line-height: $toolbar-height;
    height: $toolbar-height;
    display: inline-block;
    vertical-align: top;
  }

  &-separator {
    display: inline-block;
    line-height: $toolbar-height;
    height: $toolbar-height - 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-right: 1px solid $gray-190;
    width: 4px;
    margin-left: 0px;
    margin-right: 8px;
  }

  &-checkbox {
    display: inline-block;
    vertical-align: top;
    padding: 0 6px;
    padding-left: 4px;
    line-height: $toolbar-height;
    font-size: 13px;

    .el-svg-icon {
      width: $toolbar-height - 12px;
      height: $toolbar-height - 12px;
      margin: 6px 0;
    }

    &:hover {
      cursor: pointer;
      // @include shadow-ambient;
      background: $gray-220;
    }
  }
}

.charticulator__toolbar-vertical {
  @extend .charticulator__toolbar-horizontal;
  $toolbar-height: $tool-icon-size;
  $col2-breakpoint-height: 815px;
  $col3-breakpoint-height: 550px;
  $col4-breakpoint-height: 510px;

  $col2-cell-size: $tool-icon-size + $elements-margin $tool-icon-size +
    $elements-margin;
  $col3-cell-size: $tool-icon-size + $elements-margin $tool-icon-size +
    $elements-margin $tool-icon-size + $elements-margin;
  $col4-cell-size: $tool-icon-size + $elements-margin $tool-icon-size +
    $elements-margin $tool-icon-size + $elements-margin $tool-icon-size +
    $elements-margin;

  align-content: flex-start;
  justify-content: flex-start;
  flex-direction: row;

  width: $tool-icon-size;

  @media (max-height: $col2-breakpoint-height) {
    width: 72px;
  }

  @media (max-height: $col3-breakpoint-height) {
    width: 108px;
  }

  @media (max-height: $col4-breakpoint-height) {
    width: 144px;
  }

  flex-wrap: wrap;
  height: 100%;

  &-group {
    flex-shrink: 1;
    width: 100%;
    display: grid;

    @media (max-height: $col2-breakpoint-height) {
      grid-template-columns: $col2-cell-size;
    }

    @media (max-height: $col3-breakpoint-height) {
      grid-template-columns: $col3-cell-size;
    }

    @media (max-height: $col4-breakpoint-height) {
      grid-template-columns: $col4-cell-size;
    }
  }

  &-group > * {
    width: $tool-icon-size;
    height: $tool-icon-size;
    margin-bottom: $elements-margin;
    margin-right: $elements-margin;
  }

  &-separator {
    @extend .charticulator__toolbar-horizontal-separator;
    width: 100%;
    height: 5px;
    border-right: 0px solid $gray-190;
    border-bottom: 1px solid $gray-190;
    margin-bottom: 8px;
    position: relative;
    left: 4px;
  }

  &-label {
    font-size: 12px;
    margin-left: -8px;
  }
}

.charticulator__link-type-table {
  margin: 10px;
  h2 {
    margin: 10px 0;
    margin-top: 15px;
  }
  .el-row {
    margin: 10px 0;
  }

  .charticulator__data-field-selector {
    border: 1px solid $gray-200;
    border-radius: 2px;
  }
}
